<script setup lang="ts">
import { ref, markRaw, onMounted, onUnmounted } from "vue";
import blocksDom from "@/assets/svg/machine/blocks.svg?component";
import { getLunar } from "chinese-lunar-calendar";

const currentTime = ref("");
const currentDate = ref("");
const currentDay = ref("");

const iconComList = {
  blocksDom: markRaw(blocksDom)
};

const getTimes = () => {
  setInterval(getTimeInterval, 1000);
};

const getTimeInterval: any = () => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  // let monthStr = date.getMonth() + 1 < 10 ? "0" + date.getMonth() + 1 : date.getMonth() + 1;
  let month = date.getMonth() + 1;
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  // let dayStr = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let day = date.getDate();
  let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); // 获取时
  let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); // 获取分
  let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); // 获取秒
  currentTime.value = hour + ":" + minutes + ":" + seconds;
  const getDay = getLunar(year, month, day);
  currentDate.value = getDay.dateStr;
  currentDay.value = year + "年" + month + "月" + day + "日";
};

onMounted(() => {
  getTimes();
});

onUnmounted(() => {
  if (currentTime.value) {
    clearInterval(getTimeInterval);
  }
});
</script>

<template>
  <div style="width: 100%; height: 100%">
    <div class="time_box">
      <component :is="iconComList.blocksDom" class="content-icon" />
      <div class="time-p1">{{ currentTime }}</div>
      <div class="time-p2">{{ currentDay }}</div>
      <div class="time-p3">{{ currentDate }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.time_box {
  position: relative;
  width: 100%;
  height: 100%;

  .time-p1 {
    position: absolute;
    top: 20px;
    width: 100%;
    font-size: 32px;
    font-weight: 600;
    line-height: 49px;
    color: #000;
    text-align: center;
  }

  .time-p2 {
    position: absolute;
    top: 64px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    color: #3b82f6;
    text-align: center;
  }

  .time-p3 {
    position: absolute;
    top: 90px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    color: #3b82f6;
    text-align: center;
  }
}

.content-icon {
  position: absolute;
  right: 6px;
  bottom: 6px;
}
</style>
